import {Handle, NodeToolbar, Position} from '@xyflow/react';
import {Button, Form, Input} from "antd";
import {Dispatch, memo, SetStateAction, useEffect, useState} from 'react';
import {CgClose} from "react-icons/cg";
import {CiSettings} from "react-icons/ci";


interface TextNodeProps {
    selected: boolean;
    id: string;
    data: {
        label: string;
        setNodes: Dispatch<SetStateAction<Node[]>>;
    }
    isConnectable: boolean
    forceToolbarVisible?: boolean
    toolbarPosition: Position
}

const TextNode = (props: TextNodeProps) => {

    const {data, isConnectable, id} = props
    const [showToolbar, setShowToolbar] = useState<boolean>(false)

    const updateNodeLabel = (label: string) => {
        props.data.setNodes((nds) =>
            nds.map((node: any) =>
                node.id === id ? {...node, data: {...node.data, label: label}} : node
            )
        );
    };

    useEffect(() => {
        if (!props.selected) {
            setShowToolbar(false)
        }
    }, [props])
    return (
        <div
            className={` min-h-[50px] bg-amber-600 flex flex-col items-center justify-center gap-2 p-2 rounded-md transition-all border ${props.selected ? ` border-blue-500` : ''}`}>
            <Handle
                type="target"
                position={Position.Top}
                onConnect={(params) => console.log('handle onConnect', params)}
                isConnectable={isConnectable}
            />

            <Handle
                type="source"
                position={Position.Top}
                onConnect={(params) => console.log('handle onConnect', params)}
                isConnectable={isConnectable}
            />


            <div className="flex flex-row justify-between w-full">
                <div>{props.id}</div>
                <CiSettings onClick={() => setShowToolbar(true)}/>
            </div>

            <NodeToolbar
                isVisible={props.selected && showToolbar}
                position={Position.Right}
            >
                <div className={" ml-6 h-[400px] bg-gray-500 rounded-md p-2"}>
                    <div className={"flex flex-row-reverse w-full p-2"}>
                        <CgClose onClick={() => setShowToolbar(false)}/>
                    </div>
                    <Form layout={"vertical"}>
                        <Form.Item label={"label"}>
                            <Input value={props.data.label} onChange={(e) => {
                                updateNodeLabel(e.target.value);
                            }}/>
                        </Form.Item>
                    </Form>
                </div>
            </NodeToolbar>
            <div className={"flex flex-row justify-start items-start w-full gap-2"}>
                <div>label:</div>
                <div>{data.label}</div>
            </div>

            <div className={"w-10 h-[12px] bg-amber-400"} style={{
                position: "absolute",
                bottom: -10
            }}>
                <Handle
                    type="target"
                    position={Position.Bottom}
                    id="b"
                    isConnectable={isConnectable}
                />
                <Handle
                    type="source"
                    position={Position.Bottom}
                    id="b"
                    isConnectable={isConnectable}
                />

            </div>

            <Button onClick={() => updateNodeLabel("Reset")}>Reset Label</Button>


        </div>
    );
};


export default memo(TextNode);
